<template>
  <v-app id="inspire">
    <v-app-bar
        app
        color="white"

    >
      <v-container class="py-0 fill-height">
        <v-avatar
            class="mr-10"
            color="grey darken-1"
            size="32"
        ></v-avatar>

        <v-btn
            v-for="link in links"
            :key="link"
            text
        >
          {{ link }}
        </v-btn>

        <v-spacer></v-spacer>

        <v-responsive max-width="260">
          <v-text-field
              dense
              flat
              hide-details
              rounded
              solo-inverted
          ></v-text-field>
        </v-responsive>
      </v-container>
    </v-app-bar>

    <v-main class="grey lighten-3">
      <v-container>
        <v-row>
          <v-col cols="2">
            <v-sheet rounded="lg">
              <v-list color="transparent">
                <v-list-item
                    v-for="category in categoryList"
                    :key="category"
                    link
                >
                  <v-list-item-content>
                    <v-list-item-title>{{ category }}</v-list-item-title>
                  </v-list-item-content>
                </v-list-item>

                <v-divider class="my-2"></v-divider>

                <v-list-item
                    link
                    color="grey lighten-4"
                >
                  <v-list-item-content>
                    <v-list-item-title>
                      刷新
                    </v-list-item-title>
                  </v-list-item-content>
                </v-list-item>
              </v-list>
            </v-sheet>
          </v-col>

          <v-col>
            <router-view></router-view>
            <!--            <v-sheet-->
            <!--                min-height="70vh"-->
            <!--                rounded="lg"-->
            <!--            >-->
            <!--              &lt;!&ndash;  &ndash;&gt;-->
            <!--            </v-sheet>-->
          </v-col>
        </v-row>
      </v-container>
    </v-main>
  </v-app>
</template>

<script>
export default {
  data: () => ({
    links: [
      '首页',
      '小啊GIAO',
      '留言',
      '关于',
    ],
    categoryList: [
      'Java',
      '微服务',
      '架构',
      '前端',
      'ES6',
      'NPM',
      'VUE',
      '产品'
    ]
  }),
}
</script>
